<template>
  <div class="">
    是否初始化完成：{{ffmpeg.isLoaded}};
    <div class="btn">
      <el-button type="primary" @click="mergeTwo">合并两个视频,耗时{{cost/1000}}秒</el-button>
      <el-button type="primary" @click="mergeVideoV">叠加合并视频,耗时{{cost/1000}}秒</el-button>
      <el-button type="primary" @click="addText">添加文字,耗时{{cost/1000}}秒</el-button>
      <el-button type="primary" @click="addTextOne">某个时间段内添加文字,耗时{{cost/1000}}秒</el-button>
      <el-button type="primary" @click="addImg">贴静态图,耗时{{cost/1000}}秒</el-button>
      <el-button type="primary" @click="addGif">贴GIF,耗时{{cost/1000}}秒</el-button>
      <el-button type="primary" @click="genByJSON">根据JSON合成视频,耗时{{cost/1000}}秒</el-button>
    </div>
   
    <hr><hr>
    <video width="520" height="340" controls :src="url" ></video>
    <hr>
  <el-row :gutter="20" style="margin-top: 20px;">
    <el-col :span="12">原始JSON
      <el-input v-model="befor" :rows="4" type="textarea"/>

    </el-col>
    <el-col :span="12">解析后的命令
      <el-input v-model="after" :rows="4" type="textarea"/>

    </el-col>
   
  </el-row>
  </div>
</template>

<script setup>
  import { computed, inject, ref, watch } from 'vue';

  // import type FFManager from '@/utils/ffmpegManager';
  const ffmpeg = inject('ffmpeg') ;
  let url = ref("");
  let befor = ref('[{"type":"video","main":true,"list":[{"type":"video","name":"video_1","format":"mp4","source":"/video/video_1.mp4","main":true,"id":"t-d58e2c86-99d2"},{"type":"video","name":"video_2","source":"/video/video_2.mp4","main":false,"id":"t-545036a1-18c4","start":2,"end":5},{"type":"video","name":"video_2","source":"/video/video_3.mp4","main":false,"id":"t-545036a1-18c4","start":4,"end":8}]}]');
  let after = ref("");
  let cost = ref(0);
  const genByJSON = async ()=>{
    //先对第一个视频剪辑10秒钟
    //设置第一个视频大小
    //第二个视频 在第1秒出现 第3秒结束 出现在左上角
    //第二个视频 在第2秒出现 第5秒结束 出现在左上角的80 80 位置
    let start = new Date().getTime()
    let config = JSON.parse(befor.value)
    let vList = config.filter((a)=>a.type=='video').flatMap((item)=>item.list);
    console.log("====",vList)
    let resourceList = []
    let filters = []
    for(let index = 0; index < vList.length; index++) {
      const element = vList[index];
      element.no = index
      console.log("999",element)
      resourceList.push('-i')
      
      let fName  =element.source.split('/').pop()
      if(fName=='video_1.mp4'){
        // resourceList.push("/resource/"+fName)
        resourceList.push("/resource/video_1_1.mp4")
      }else{
        resourceList.push("/resource/"+fName)
      }
      
      console.log("=="+fName+"========="+element.source)
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, fName, element.source)
      console.log("=="+fName+"=",ffmpeg.fileExist("/resource/",fName))
      if(element.main){

      }
    }
    let comList = []
    vList.map(it=>{
      console.log("第一遍设置视频大小"+it.no)
      comList.push(`[${it.no}:v]scale=${it.w}:${it.h}[v${it.no}];`)
      return it
    }).map(it=>{
      console.log("第二遍设置视频位置"+it.no)
      return it
    }).map(it=>{
      console.log("第三遍设置视频")
      return it
    })
    filters.push('-filter_complex')
    filters.push("[0:v]scale=1242:652[v0];[1:v]scale=1242/2:652/2[v1];[2:v]scale=1242/2:652/2[v2];[v0][v1]overlay=0:0:enable='between(t,1,3)'[v01];[v01][v2]overlay=80:80:enable='between(t,2,5)'[v]")
    filters.push("-map")
    filters.push("[v]")
    filters.push("/resource/video_5.mp4")
    console.log("4444",resourceList)
    console.log("4444",resourceList.join("-"))
   
    let mergeVi =[...resourceList,...filters]

    await ffmpeg.run([
      '-i','/resource/video_1.mp4',
      '-ss','00:00:05',
      '-t','00:00:11',
      '-c','copy',
      '/resource/video_1_1.mp4',
    ])
    console.log("=剪辑完成=video_1_1.mp4=")
    console.log("=1111111111111111111111111111111111111111=video_1_1.mp4=",ffmpeg.fileExist("/resource/","video_1_1.mp4"))
    // let mergeVi = [
    //     '-i', '/resource/video_1.mp4', 
    //     '-i', '/resource/video_2.mp4', 
    //     '-i', '/resource/video_3.mp4', 
    //     '-filter_complex', 
    //     "[0:v]scale=1242:652[v0];[1:v]scale=1242/2:652/2[v1];[2:v]scale=1242/2:652/2[v2];[v0][v1]overlay=0:0:enable='between(t,1,3)'[v01];[v01][v2]overlay=80:80:enable='between(t,2,5)'[v]",
    //     '-map', '[v]',
    //     '/resource/video_5.mp4', 
    //   ]
      // await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_1.mp4", "/video/video_1.mp4")
      // await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_2.mp4", "/video/video_2.mp4")
      // await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_3.mp4", "/video/video_3.mp4")
    after.value =  mergeVi.join(" ")
    await ffmpeg.run(mergeVi)
      let exit = ffmpeg.fileExist("/resource/","video_5.mp4")
      console.log("==exit=",ffmpeg.fileExist("/resource/","video_5.mp4"))
      if(exit){
        let pathUrl = ffmpeg.getFileUrl(ffmpeg.pathConfig.resourcePath,"video_5","mp4")
        console.log("==pathUrl=",pathUrl)
        let end = new Date().getTime()
        cost.value = end-start
        url.value = pathUrl
      }
  }
  const addGif = async ()=>{
      let start = new Date().getTime()
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_3.mp4", "/video/video_3.mp4")
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "image_0.gif", "/image/image/image_0.gif")
      // await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "ali.ttf", "/font/AlibabaPuHuiTi.ttf")
      console.log("==ali.ttf=",ffmpeg.fileExist("/resource/","ali.ttf"))
      // ffmpeg.mergeAudio
      let mergeVi = [
        '-i', '/resource/video_3.mp4', 
        '-i', '/resource/image_0.gif', 
        '-filter_complex', 
        // "[0:v][1:v]overlay=10:10:enable='between(t,2,5)':shortest=1[v]",
        //重复gif图
        "[1:v]loop=loop=-1:size=5:start=0[v1];[0:v][v1]overlay=10:10:shortest=1[v]",
        '-map', '[v]',
        '/resource/video_5.mp4', 
      ]
      await ffmpeg.run(mergeVi)
      let exit = ffmpeg.fileExist("/resource/","video_5.mp4")
      console.log("==exit=",ffmpeg.fileExist("/resource/","video_5.mp4"))
      if(exit){
        let pathUrl = ffmpeg.getFileUrl(ffmpeg.pathConfig.resourcePath,"video_5","mp4")
        console.log("==pathUrl=",pathUrl)
        let end = new Date().getTime()
        cost.value = end-start
        url.value = pathUrl
      }
  }
  const addImg = async ()=>{
      let start = new Date().getTime()
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_3.mp4", "/video/video_3.mp4")
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "image_0.png", "/image/image/image_0.png")
      // await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "ali.ttf", "/font/AlibabaPuHuiTi.ttf")
      console.log("==ali.ttf=",ffmpeg.fileExist("/resource/","ali.ttf"))
      // ffmpeg.mergeAudio
      let mergeVi = [
        '-i', '/resource/video_3.mp4', 
        '-i', '/resource/image_0.png', 
        '-filter_complex', 
        "[0:v][1:v]overlay=W-w-10:H-h-10:enable='between(t,1,5)'[v]",
        '-map', '[v]',
        '/resource/video_5.mp4', 
      ]
      await ffmpeg.run(mergeVi)
      let exit = ffmpeg.fileExist("/resource/","video_5.mp4")
      console.log("==exit=",ffmpeg.fileExist("/resource/","video_5.mp4"))
      if(exit){
        let pathUrl = ffmpeg.getFileUrl(ffmpeg.pathConfig.resourcePath,"video_5","mp4")
        console.log("==pathUrl=",pathUrl)
        let end = new Date().getTime()
        cost.value = end-start
        url.value = pathUrl
      }
  }
  const addTextOne = async ()=>{
      let start = new Date().getTime()
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_3.mp4", "/video/video_3.mp4")
      // await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_4.mp4", "/video/video_4.mp4")
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "ali.ttf", "/font/AlibabaPuHuiTi.ttf")
      console.log("==ali.ttf=",ffmpeg.fileExist("/resource/","ali.ttf"))
      // ffmpeg.mergeAudio
      let mergeVi = [
        '-i', '/resource/video_3.mp4', 
        // '-i', '/resource/video_4.mp4', 
        '-filter_complex', 
        "[0:v]drawtext=text='Tdeo':x=50:y=60:fontsize=84:enable='between(t,2,5)':fontcolor=red:fontfile='/resource/ali.ttf',drawtext=text='Tdeo777777':x=240:y=260:fontsize=84:enable='between(t,0,3)':fontcolor=blue:fontfile='/resource/ali.ttf'[v]",
        '-map', '[v]',
        '/resource/video_5.mp4', 
      ]
      await ffmpeg.run(mergeVi)
      let exit = ffmpeg.fileExist("/resource/","video_5.mp4")
      console.log("==exit=",ffmpeg.fileExist("/resource/","video_5.mp4"))
      if(exit){
        let pathUrl = ffmpeg.getFileUrl(ffmpeg.pathConfig.resourcePath,"video_5","mp4")
        console.log("==pathUrl=",pathUrl)
        let end = new Date().getTime()
        cost.value = end-start
        url.value = pathUrl
      }
  }
  const addText = async ()=>{
      let start = new Date().getTime()
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_3.mp4", "/video/video_3.mp4")
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_4.mp4", "/video/video_4.mp4")
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "ali.ttf", "/font/AlibabaPuHuiTi.ttf")
      console.log("==ali.ttf=",ffmpeg.fileExist("/resource/","ali.ttf"))
      // ffmpeg.mergeAudio
      let mergeVi = [
        '-i', '/resource/video_3.mp4', 
        '-i', '/resource/video_4.mp4', 
        '-filter_complex', 
        "[0:v]drawtext=text='Tdeo':x=50:y=60:fontsize=84:fontcolor=red:fontfile='/resource/ali.ttf'[video1];[video1]scale=1242x652:force_original_aspect_ratio=decrease,pad=1242:652:(ow-iw)/2:(oh-ih)/2[v0];[1:v]scale=1242x652:force_original_aspect_ratio=decrease,pad=1242:652:(ow-iw)/2:(oh-ih)/2[v1];[v0][v1]concat=n=2:v=1:a=0[v]",
        '-map', '[v]',
        '/resource/video_5.mp4', 
      ]
      await ffmpeg.run(mergeVi)
      let exit = ffmpeg.fileExist("/resource/","video_5.mp4")
      console.log("==exit=",ffmpeg.fileExist("/resource/","video_5.mp4"))
      if(exit){
        let pathUrl = ffmpeg.getFileUrl(ffmpeg.pathConfig.resourcePath,"video_5","mp4")
        console.log("==pathUrl=",pathUrl)
        let end = new Date().getTime()
        cost.value = end-start
        url.value = pathUrl
      }
  }
  const mergeTwo = async ()=>{
      let start = new Date().getTime()
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_3.mp4", "/video/video_3.mp4")
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_4.mp4", "/video/video_4.mp4")
     
      // ffmpeg.mergeAudio
      let mergeVi = [
        '-i', '/resource/video_3.mp4', 
        '-i', '/resource/video_4.mp4', 
        '-filter_complex', 
        '[0:v]scale=1242x652:force_original_aspect_ratio=decrease,pad=1242:652:(ow-iw)/2:(oh-ih)/2[v0];[1:v]scale=1242x652:force_original_aspect_ratio=decrease,pad=1242:652:(ow-iw)/2:(oh-ih)/2[v1];[v0][v1]concat=n=2:v=1:a=0[v]',
        '-map', '[v]',
        '/resource/video_5.mp4', 
      ]
      await ffmpeg.run(mergeVi)
      let exit = ffmpeg.fileExist("/resource/","video_5.mp4")
      console.log("==exit=",ffmpeg.fileExist("/resource/","video_5.mp4"))
      if(exit){
        let pathUrl = ffmpeg.getFileUrl(ffmpeg.pathConfig.resourcePath,"video_5","mp4")
        console.log("==pathUrl=",pathUrl)
        let end = new Date().getTime()
        cost.value = end-start
        url.value = pathUrl
      }
  }
  const mergeVideoV = async ()=>{
      let start = new Date().getTime()
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_3.mp4", "/video/video_3.mp4")
      await ffmpeg.writeFile(ffmpeg.pathConfig.resourcePath, "video_4.mp4", "/video/video_4.mp4")
     
      // ffmpeg.mergeAudio
      let mergeVi = [
        '-i', '/resource/video_3.mp4', 
        '-i', '/resource/video_4.mp4', 
        '-filter_complex', 
        "[0:v]scale=1242:652[v0];[1:v]scale=350:200[v1];[v0][v1]overlay=10:10:enable='gte(t,2)'[v]",
        '-map', '[v]',
        '/resource/video_5.mp4', 
      ]
      await ffmpeg.run(mergeVi)
      let exit = ffmpeg.fileExist("/resource/","video_5.mp4")
      console.log("==exit=",ffmpeg.fileExist("/resource/","video_5.mp4"))
      if(exit){
        let pathUrl = ffmpeg.getFileUrl(ffmpeg.pathConfig.resourcePath,"video_5","mp4")
        console.log("==pathUrl=",pathUrl)
        let end = new Date().getTime()
        cost.value = end-start
        url.value = pathUrl
      }
  }
  const initVideo = async ()=>{
    if(ffmpeg.isLoaded.value){
      console.log("0000==初始化完成了=")

    }
    
    
  }
  watch(() => {
    return ffmpeg.isLoaded.value;
  }, initVideo, {
    immediate: true,
    flush: 'post'
  });
</script>
<style>
.btn{
  margin: 20px 20px;
}
</style>